<template>
  <div style="width: 95%; height: 95%">
    <div style="height: 100%">
      <el-row style="height: 100%">
        <!-- 左边面板 -->
        <el-col :span="12" style="height: 100%">
          <div class="panelStyle animate__animated animate__slideInLeft">
            <div style="width: 95%; height: 95%">
              <div style="height: 50%">
                <el-descriptions class="margin-top" :column="1" border>
                  <template slot="title">
                    <p style="padding: 0px; margin: 0px; display: flex; justify-content: center; align-items: center;">
                      <span style="width: 4em">表名：</span>
                      <el-input v-model="tableName" placeholder="请输入表名"></el-input>
                    </p>
                  </template>
                  <template slot="extra">
<!--                    <el-button >智能导入</el-button>-->
                    <el-button @click="commonColumnsInsert">通用字段导入</el-button>
<!--                    <el-button @click="createSQLInsert">由建表SQL导入</el-button>-->
                  </template>

                  <el-descriptions-item>
                    <template slot="label">
                      <span style="color: red">* </span>字段名
                    </template>
                    <el-input v-model="columnName" placeholder="字段名" style="width: 50%"></el-input>
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      <span style="color: red">* </span>数据类型
                    </template>
                    <div>
                      <el-select v-model="typeValue" placeholder="请选择数据类型" @change="handleTypeSelect">
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                        </el-option>
                      </el-select>
                    </div>
                  </el-descriptions-item>

                  <el-descriptions-item >
                    <template slot="label">
                      <span style="color: red">* </span>数据源
                    </template>
                    <el-select v-model="sourceValue" placeholder="请选择数据源" @change="handleSourceSelect">
                      <el-option
                          v-for="item in sourceOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          :disabled="item.disabled">
                      </el-option>
                    </el-select>
                    <el-input v-show="sourceValue == '1' || sourceValue == '3' || sourceValue == '4' || sourceValue == '5'" v-model="sourceValue_val" :placeholder="getPlaceholder(this.sourceValue)" style="width: 280px; margin-left: 20px"></el-input>
                    <el-select v-model="sourceValue_val" :placeholder="getPlaceholder(this.sourceValue)" v-show="sourceValue == '2' || sourceValue == '6'" style="margin-left: 20px">
                      <el-option
                          v-for="item in (sourceValue == '6' ? smartOptions: lexiconList)"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                          :disabled="item.disabled">
                      </el-option>
                    </el-select>
                    <el-popover
                        placement="top-start"
                        title="HELP"
                        width="500"
                        trigger="hover"
                        >
                      <div v-html="getInfoContent()">
                      </div>
                      <i slot="reference" class="el-icon-info" style="margin-left: 10px" v-show="sourceValue != ''"></i>
                    </el-popover>

                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      <i class="el-icon-tickets"></i>
                      备注
                    </template>
                    <div style="display: flex; align-items: center;">
                      <el-input v-model="comment" placeholder="备注" style="width: 78%"></el-input>
                      <div style="width: 22%; display: flex; justify-content: right">
                        <el-button @click="addColumns">添加字段&nbsp;&nbsp;↓</el-button>
                      </div>
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
                <div style="margin-top: 12px; margin-bottom: 12px;display: flex">
                  <div style="width: 70%; display: flex; justify-content: left; align-items: center">
                    <span style="color: red">* </span>生成条目数：<el-input-number v-model="num" controls-position="right" :min="1" :max="999"></el-input-number>
                  </div>
                  <div style="width: 30%; display: flex; justify-content: right; align-items: center">
                    <el-button style="margin-left: 10px" @click="generateData" type="primary">生成数据 👉</el-button>
                  </div>
                </div>
              </div>
              <div style="height: 50%; overflow: auto;border-color: #5c687d; border-style: dotted;" class="scrollbarStyle">
                <div v-for="(item, index) in columns" id="column_item">
                  <el-tooltip class="item" effect="dark" :content="showColumnInfo(index)" placement="top-start">
                    <span style="width: 90%; line-height: 60px; margin-left: 10px">字段名：{{ item.columnName }} ,&nbsp;&nbsp;类型：{{ item.type }} ,&nbsp;&nbsp;数据源：{{ item.source }}</span>
                  </el-tooltip>
                  <span style="width: 6%">
                    <span v-if="index != 0"><i class="el-icon-caret-top" @click="up(index)"></i>&nbsp;&nbsp;</span>
                    <i v-if="index != columns.length - 1" class="el-icon-caret-bottom" @click="down(index)"></i></span>
                  <span style="width: 5%;" class="removeText" @click="removeColumns(index)">移除</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右边面板 -->
        <el-col :span="12" style="height: 100%">
          <div class="panelStyle animate__animated animate__slideInRight" style="margin-left: 30px;">
            <div style="width: 95%; height: 95%">
              <div style="height: 5%">
                <span style="width: 4em; font-weight: bold">生成结果</span>
              </div>
              <div style="height: 95%" id="tabPanel">
                <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
                  <el-tab-pane label="SQL代码" name="sql">
                    <div>
                      <p style="display: flex; margin-top: 0px;">
                        <span style="width: 91%">建表语句</span>
                        <el-popover
                            class="my_popper"
                            placement="left"
                            trigger="manual"
                            content="已复制到剪切板"
                            :value="(copyTipShow == 0)">
                          <el-button slot="reference" size="mini" icon="el-icon-copy-document" plain @click="copyCode(createTableSql, 0)">复制</el-button>
                        </el-popover>
                      </p>
                      <el-input
                          type="textarea"
                          :rows="10"
                          placeholder="建表语句"
                          resize="none"
                          :spellcheck="false"
                          v-model="createTableSql">
                      </el-input>
                    </div>
                    <div>
                      <p style="display: flex">
                        <span style="width: 91%">插入语句</span>
                        <el-popover
                            placement="left"
                            trigger="manual"
                            content="已复制到剪切板"
                            :value="(copyTipShow == 1)">
                          <el-button slot="reference" size="mini" icon="el-icon-copy-document" plain @click="copyCode(insertSql, 1)">复制</el-button>
                        </el-popover>
                      </p>
                      <el-input
                          type="textarea"
                          :rows="17"
                          placeholder="插入语句"
                          resize="none"
                          :spellcheck="false"
                          v-model="insertSql">
                      </el-input>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="JSON数据" name="json">
                    <div>
                      <p style="display: flex; margin-top: 0px;">
                        <span style="width: 91%">JSON格式数据</span>
                        <el-popover
                            placement="left"
                            trigger="manual"
                            content="已复制到剪切板"
                            :value="(copyTipShow == 2)">
                          <el-button slot="reference" size="mini" icon="el-icon-copy-document" plain @click="copyCode(jsonText, 2)">复制</el-button>
                        </el-popover>
                      </p>
                      <el-input
                          type="textarea"
                          :rows="30"
                          placeholder="JSON数据"
                          resize="none"
                          :spellcheck="false"
                          v-model="jsonText">
                      </el-input>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="Java代码" name="java">
                    <div>
                      <p style="display: flex; margin-top: 0px;">
                        <span style="width: 91%">Java实体类代码</span>
                        <el-popover
                            placement="left"
                            trigger="manual"
                            content="已复制到剪切板"
                            :value="(copyTipShow == 3)">
                          <el-button slot="reference" size="mini" icon="el-icon-copy-document" plain @click="copyCode(javaEntity, 3)">复制</el-button>
                        </el-popover>
                      </p>
                      <el-input
                          type="textarea"
                          :rows="10"
                          placeholder="Java实体类代码"
                          resize="none"
                          :spellcheck="false"
                          v-model="javaEntity">
                      </el-input>
                    </div>
                    <div>
                      <p style="display: flex">
                        <span style="width: 91%">Java数据代码</span>
                        <el-popover
                            placement="left"
                            trigger="manual"
                            content="已复制到剪切板"
                            :value="(copyTipShow == 4)">
                          <el-button slot="reference" size="mini" icon="el-icon-copy-document" plain @click="copyCode(javaData, 4)">复制</el-button>
                        </el-popover>
                      </p>
                      <el-input
                          type="textarea"
                          :rows="17"
                          placeholder="Java数据代码"
                          resize="none"
                          :spellcheck="false"
                          v-model="javaData">
                      </el-input>
                    </div>
                  </el-tab-pane>
<!--                  <el-tab-pane label="Excel数据" name="excel">-->

<!--                  </el-tab-pane>-->
                </el-tabs>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import optionValues from '../util/optionValues.json'
import SQLGenerateUtil from "@/util/SQLGenerateUtil";
import {isEmpty, isLogin} from "@/util/CommonUtil";
import {GET, POSTData} from "@/util/HttpUtil";
export default {
  name: "GeneratePage",
  data(){
    return {
      columnName: '',
      tableName: '',
      num: '',
      comment: '',
      sourceValue: '',
      sourceValue_val: '',
      typeValue: '',
      textarea: '',
      createTableSql: '',
      insertSql: '',
      jsonText: '',
      javaEntity: '',
      javaData: '',
      typeOptions: optionValues['typeOptions'],
      sourceOptions: optionValues['sourceOptions'],
      smartOptions: optionValues['smartOptions'],
      wordOptions: [],
      columns: [],
      activeName: 'sql',
      copyTipShow: -1,
      tipTimeOut: null,
      lexiconList: [],
    }
  },
  methods:{
    commonColumnsInsert(){
      let tempColumn = [
        {
          columnName: 'id',
          type: 'int',
          typeVal: '0',
          source: '递增',
          sourceType: '3',
          sourceVal: 0,
          comment: ''
        },
        {
          columnName: 'create_time',
          type: 'datetime',
          typeVal: '2',
          sourceType: '0',
          sourceVal: 0,
          source: '随机构造',
          comment: ''
        },
        {
          columnName: 'update_time',
          type: 'datetime',
          typeVal: '2',
          sourceType: '0',
          sourceVal: 0,
          source: '随机构造',
          comment: ''
        },
        {
          columnName: 'is_delete',
          typeVal: '3',
          sourceType: '5',
          sourceVal: 0,
          type: 'tinyint',
          source: '固定值',
          comment: '是否删除(0-未删, 1-已删)'
        }
      ];
      for (let i = 0; i < this.columns.length; i++) {
        switch (this.columns[i].columnName){
          case "id": tempColumn[0] = null; break;
          case "create_time": tempColumn[1] = null; break;
          case "update_time": tempColumn[2] = null; break;
          case "is_delete": tempColumn[3] = null; break;
        }
      }
      for (let i = 0; i < tempColumn.length; i++) {
        if (tempColumn[i] != null){
          this.columns.push(tempColumn[i]);
        }
      }
    },
    up(index){
      const temp = this.columns[index - 1];
      this.columns.splice(index - 1, 1);
      this.columns.splice(index, 0, temp);
    },
    down(index){
      const temp = this.columns[index];
      this.columns.splice(index, 1);
      this.columns.splice(index + 1, 0, temp);
    },
    removeColumns(index){
      this.columns.splice(index, 1);
    },
    addColumns(){
      if(isEmpty(this.columnName, this.typeValue, this.sourceValue) || !isEmpty(this.getPlaceholder(this.sourceValue)) && isEmpty(this.sourceValue_val)){
        this.$message.warning("参数缺失！");
        console.log(this.columnName, this.typeValue, this.sourceValue)
        return;
      }
      if(isEmpty(this.tableName)){
        this.tableName = "default_table"
      }
      let column = {
        columnName: this.columnName,
        type: optionValues['typeOptions'][this.typeValue].label,
        source: optionValues['sourceOptions'][this.sourceValue].label,
        comment: this.comment,
        typeVal: this.typeValue,
        sourceVal: this.sourceValue_val,
        sourceType: this.sourceValue,
      }
      this.columns.push(column);
      this.columnName = '';
      this.typeValue = '';
      this.sourceValue = '';
      this.comment = '';
      this.sourceValue_val = '';
    },
    generateData(){
      if(this.columns.length == 0){
        this.$message.warning("不存在字段！");
        return;
      }
      if(isEmpty(this.tableName)){
        this.tableName = "default_table"
      }

      this.insertSql = "";
      this.createTableSql = "";

      POSTData(
          "/api/common/create?count=" + this.num,
          this.columns,
          (res)=>{
            if(res.code == 200){
              this.createTableSql = SQLGenerateUtil.createTable(this.tableName, this.columns);
              this.javaEntity = SQLGenerateUtil.createJavaEntity(this.tableName, this.columns);
              this.insertSql = SQLGenerateUtil.createInsertSQL(this.tableName, res.data, this.columns);
              this.jsonText = SQLGenerateUtil.formatJSON(JSON.stringify(res.data));
              this.javaData = SQLGenerateUtil.createJavaData(this.tableName, res.data, this.columns);
            }else {
              this.$message.error(res.msg);
            }
          }
      );
    },
    getPlaceholder(val){
      switch (val) {
        case "1":{
          return "正则表达式仅支持【[]{}^*+?】";
        }
        case "3":{
          return "递增起始值";
        }
        case "4":{
          return "递减起始值";
        }
        case "5":{
          return "固定值";
        }
        case "2":
        case "6":{
          return "选择";
        }
      }
      return '';
    },
    handleTabClick(){
    },
    copyCode(content, index){
      clearTimeout(this.tipTimeOut);
      let hiddenInput = document.createElement('textarea')
      hiddenInput.value = content;
      document.body.append(hiddenInput);
      hiddenInput.select();
      document.execCommand("copy");
      document.body.removeChild(hiddenInput);
      this.copyTipShow = index;
      this.tipTimeOut = setTimeout(()=>{
        this.copyTipShow = -1;
      }, 800);
    },
    showColumnInfo(index){
      let column = this.columns[index];
      let info = "";
      info = info + (column.comment == '' ? '' : '备注： ' + column.comment);
      let val = this.getPlaceholder(column.sourceType);
      if(column.sourceType == '2'){
        for (let i = 0; i < this.lexiconList.length; i++) {
          if(this.lexiconList[i].value == column.sourceVal){
            info = info + "    " + val + ": " + this.lexiconList[i].label;
          }
        }
      }else if(column.sourceType == '6'){
        info = info + "    " + val + ": " + this.smartOptions[column.sourceVal].label;
      }else {
        if(val != ''){
          info = info + "    " + val + ": " + column.sourceVal;
        }
      }
      if(info == ""){
        info = "无额外信息";
      }
      return info;
    },
    handleSourceSelect(val){
      if(val == '2'){
        if(!isLogin()){
          this.$message.warning("请先登录以获取词库！");
          return;
        }else {
          if(this.lexiconList.length == 0){
            this.getMyLexicon();
            this.getMyCollection();
          }
        }
      }
    },
    handleTypeSelect(val){
      this.sourceOptions = this.typeOptions[val].sourceOptions;
    },
    getMyLexicon(){
      GET("/api/lexicon/listByAccount", res => {
        if(res.code == 200){
          for(let item in res.data){
            this.lexiconList.push({
              label: res.data[item].title,
              value: res.data[item].id
            });
          }
        }else {
          this.$message.error(res.msg);
        }
      });
    },
    getMyCollection(){
      GET("/api/lexicon/collection", res => {
        if(res.code == 200){
          for(let item in res.data){
            this.lexiconList.push({
              label: res.data[item].title,
              value: res.data[item].id
            });
          }
        }else {
          this.$message.error(res.msg);
        }
      });
    },
    getInfoContent(){
      let info = "";
      switch (this.sourceValue){
        case "0": {
          info = "根据数据类型进行随机构造";
          break;
        }
        case "1": {
          info = "通过填入简单正则表达式进行构造<br>例：<br>生成QQ邮箱: [1-9][0-9]{8, 10}@qq.com<br>网址: http[s]?://[0-9a-zA-Z]{5,15}.com";
          break;
        }
        case "2": {
          info = "需要先登录选择已收藏或新建的词库进行构造";
          break;
        }
        case "3": {
          info = "由设置的初始值开始递增";
          break;
        }
        case "4": {
          info = "由设置的初始值开始递减";
          break;
        }
        case "5": {
          info = "设置一个固定值";
          break;
        }
        case "6": {
          info = "选取平台提供的数据源：人名、手机号码、中国城、车牌号码等";
          break;
        }
      }
      return info;
    }
  }
}
</script>

<style scoped>
.panelStyle{
  background-color: white;
  /*box-shadow: #c0dedc 10px 10px 8px;*/
  box-shadow: 0 2px 12px 0 #c0dedc;
  height: 100%;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.removeText{
  cursor: pointer;
  margin-right: 5px;
}
.removeText:hover{
  color: #fd3b3b;
}
.scrollbarStyle i{
  cursor: pointer;
}

#column_item{
  margin: 5px;
  background-color: #badbdb;
  height: 60px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  cursor: default;
}

#column_item i:hover{
  color: #ffffff;
}

#column_item:hover{
  background-color: #95c7c7;
  margin: 3px 7px 7px 3px;
  box-shadow: #c1c1c1 2px 2px 2px;
}
</style>
<style>
.el-popover{
  min-width: 80px !important;
  /*width: 100px !important;*/
  padding: 8px 10px !important;
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3) !important;
}

.el-descriptions-item__label{
  width: 100px!important;
}
#tabPanel .el-textarea__inner{
  background-color: #4d4d4d!important;
  color: rgb(217 255 254)!important;
}
/*滚动条宽 长,滚动条整体部分，其中的属性有width,height,background,border等。*/

::-webkit-scrollbar{
  width: 7px;
}

/*滚动条的滑轨背景颜色,可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

/*滑块颜色 */

::-webkit-scrollbar-thumb{
  background-color: rgba(135, 135, 135, 0.66);

  border-radius: 5px;

}

/*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

::-webkit-scrollbar-button{
  background-color: #eee;

  display: none;

}

/*横向滚动条和纵向滚动条相交处尖角的颜色 */

::-webkit-scrollbar-corner{
  background-color: black;

}

.el-select-dropdown__wrap{
  padding-bottom: -7px;

}

</style>